<template>
  <a-modal v-model="mVisible"  width="70%">
    <a-tabs default-active-key="2" >
      <a-tab-pane key="1" tab="生产" v-if="false">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="产线" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <a-input v-model="model.pline" style="width: 100%" :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <a-input v-model="model.equipmentName" style="width: 100%" :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备状态" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <a-input v-model="devStatus" style="width: 100%" :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="今日产量" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <a-input-number v-model="model.qtyOk" style="width: 100%" :disabled="true" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2" :tab="'设备信息['+model.equipmentNos+']'" >
        <a-descriptions title="设备数据">
          <a-descriptions-item label="产线">
            {{model.pline}}
          </a-descriptions-item>
          <a-descriptions-item label="设备名称">
            {{model.equipmentName}}
          </a-descriptions-item>
          <a-descriptions-item label="设备状态">
            {{devStatus}}
          </a-descriptions-item>
          <a-descriptions-item label="今日产量" v-if="!model.ext.huiliuhanChannelList">
            {{model.qtyOk}}
          </a-descriptions-item>
          <a-descriptions-item label="炉温设定" v-if="model.ext.bofenghanDataList">
            {{model.ext.bofenghanDataList[0].luwenConfig}}℃
          </a-descriptions-item>
          <a-descriptions-item label="速度" v-if="model.ext.bofenghanDataList">
            {{model.ext.bofenghanDataList[0].speed}}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="回炉焊状态" v-if="model.ext.huiliuhanChannelList">
          <a-descriptions-item label="上报时间" >
            {{huiliuhanInfo.time}}
          </a-descriptions-item>
          <a-descriptions-item label="供电状态" >
            {{huiliuhanInfo.gongdian}}
          </a-descriptions-item>
          <a-descriptions-item label="热风马达" >
            {{huiliuhanInfo.mada}}
          </a-descriptions-item>
          <a-descriptions-item label="运输速度状态" >
            {{huiliuhanInfo.cssd}}
          </a-descriptions-item>
          <a-descriptions-item label="掉板报警" >
            {{huiliuhanInfo.dbbj}}
          </a-descriptions-item>
          <a-descriptions-item label="上炉胆" >
            {{huiliuhanInfo.sld}}
          </a-descriptions-item>
          <a-descriptions-item label="紧急制" >
            {{huiliuhanInfo.jjz}}
          </a-descriptions-item>
          <a-descriptions-item label="风机1" >
            {{huiliuhanInfo.fj1}}
          </a-descriptions-item>
          <a-descriptions-item label="链速" >
            {{huiliuhanInfo.ls}}
          </a-descriptions-item>
          <a-descriptions-item label="氧气浓度" >
            {{huiliuhanInfo.yqnd}}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="通道状态" v-if="model.ext.huiliuhanChannelList">
          <a-descriptions-item :label="item.name" v-for="(item, index) in huiliuhanInfo.channels"
                               :key="index">
            设定:{{item.config}}℃,实时温度:{{item.value}}℃,状态:{{item.status}}
          </a-descriptions-item>
        </a-descriptions>


        <a-row style="background-color: #003a4e;" v-if="model.ext.bofenghanDataList">
          <div style="display: flex">
              <bofenghan-data :cdata="model.ext.bofenghanDataList"
                              title="波峰焊炉温走势图"
                              :show-value="true" style="height:400px;margin: 0 auto" width="700px" />
          </div>
        </a-row>
          <a-row style="background-color: #006569;" v-if="!model.ext.huiliuhanChannelList&&!model.ext.bofenghanDataList">
          <div style="display: flex">
          <mi-qcdata-pie v-if="model.ext&&model.ext.detail"
              :cdata="model.ext.detail" :show-value="true" width="400px" style="height:300px;margin: 0 auto"
                       :title="model.ext.defectName" title2="位号"
          />
          <mi-qcdata-pie v-if="model.ext&&model.ext.udc "
                         :cdata="model.ext.udc" :show-value="true" width="400px" style="margin-left:50px;height:300px;margin: 0 auto"
                         :title="model.ext.defectName" title2="不良原因" />
          </div>
          <qcdata-line v-if="model.ext&&model.ext.passRate"
              :cdata="model.ext.passRate"
                       :title="model.equipmentName"
                       :show-value="true" style="height:200px;margin: 0 auto" width="500px"/>
        </a-row>
      </a-tab-pane>
    </a-tabs>
    <template slot="footer">
      <a-button key="back" @click="mVisible=false">
        返回
      </a-button>
    </template>

  </a-modal>
</template>

<script>
import miQcdataPie from './mi-qcdata-pie'
import qcdataLine from './qcdata-line'
import bofenghanData from './bofenghan-data'

export default {
  name: "DeviceInfo",
  components:{miQcdataPie,qcdataLine,bofenghanData},
  data(){
    return{
      mVisible:false,
      devStatus:'',
      model:{ext:null},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }
  },
  computed:{
    huiliuhanInfo(){
      return this.model.ext.huiliuhanChannelList==null||this.model.ext.huiliuhanChannelList.length==0?{}:
          this.model.ext.huiliuhanChannelList[this.model.ext.huiliuhanChannelList.length-1]
    }
  },
  watch:{
    'model.status':{
      handler(v){
        this.devStatus=v==0?'生产中':(v==1?'待机':(v==2?'停用':'离线'))
      }
    }
  }
}
</script>

<style scoped>

</style>
